<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage" style="background-color: #031725;"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="user_name" type="text" maxlength="11" :placeholder="$t('login.userName')"></wInput>
				<wInput v-model="password" type="password" maxlength="11" :placeholder="$t('login.password')"></wInput>

			</view>
			<wButton :text="$t('login.login')" :rotate="isRotate" @click.native="startLogin()"></wButton>

			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate">{{$t('login.RetrievePassword')}}</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate">{{$t('login.register')}}</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	// import common from '../../common/common.js';
	// import {
	// 	api,
	// 	urls,
	// 	pagesBase as pages,
	// } from '../../common/base.js';
	// import fetch from '../../common/request.js';
	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '/static/logo.png',
				user_name: '', //用户/电话
				password: '', //密码
				isRotate: false, //是否加载旋转
			};
		},
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
		},
		onLoad() {
			this.$i18n.locale = this.$common.localRead("local")
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			isLogin() {
				
			},
			startLogin() {
				//登录
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (!this.user_name) {
					this.$common.showToast(this.$t('login.userNameNotNull'))
					return;
				}
				if (!this.password) {
					this.$common.showToast(this.$t('login.passwordNotNull'))
					return;
				}

				_this.isRotate = true
				setTimeout(function() {
					_this.isRotate = false
				}, 1500)

				_this.getToken();

			},
			getToken() {
				let data = {
					username: _this.user_name.trim(),
					password: _this.password.trim(),
				}
				_this.$fetch.request('auth/login', data, 'POST').then((res) => {
					if (res.code == 200) {
						console.info("获取token成功")
						$common.setToken(res.data.token)
						console.info($common.getToken())

						_this.getUserByToken()
					} else {
						if (res.code == 105) {
							$common.showToast(res.msg);
							return;
						} else {
							$common.showToast(res.msg);
						}

					}
				}).catch((e) => {})
			},
			getUserByToken() {
				console.info("===getUserByToken:")
				let data = {
					username: _this.user_name,
					password: _this.password,
				}
				_this.$fetch.request('auth/getUserByToken', data).then((res) => {
					console.info(res)
					if (res.code == 200) {
						console.info("获取getUserByToken成功")

						$common.setUser(res.data.userInfo);
						// $common.showToast("登陆成功",1);
						$common.toPage(_this.$base.pagePath().index.index)

					} else {
						fetch.toast(res.message)
					}
				}).catch((e) => {})
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");




	.main-list {
		color: #E6EEFF;
		background-color: #172434;
	}

	.uni-input-placeholder {
		color: var(--et_font);
	}

	input {
		color: #E6EEFF !important;
	}
</style>
